/* ======================================================================= */
/* MODULE
/* ======================================================================= */

.module{
	position: relative;
	overflow: hidden;
	border-color: $background_color;
	background: $background_color;
}

.module-inner{
	padding: $mega_space $micro_space;
}

/* ----- colors ----- */

.module-light{
	border-color: $light_color;
	background: $light_color;
}

.module-dark{
	border-color: $secondary_color_2;
	background: $secondary_color_2;

	h1, h2, h3, h4, h5, h6{
		color: #fff;
	}
}

.module-color{
	border-color: $primary_color;
	background: $primary_color;

	h1, h2, h3, h4, h5, h6{
		color: #fff;
	}
}

/* ----- connect ----- */

$module_connect_border_width: 40px;
$module_connect_border_height: 12px;

.module-connect-right,
.module-connect-left,
.module-connect-top,
.module-connect-bottom{
	overflow: visible;
}

.module-connect-right:before,
.module-connect-left:after,
.module-connect-top:before,
.module-connect-bottom:after{
	content: "";
	display: block;
	width: 0;
	height: 0;
	position: absolute;
	z-index: 1;
	border-style: solid;
	border-color: inherit;
	border-width: $module_connect_border_width*0.5;
}

.module-connect-top:before,
.module-connect-bottom:after{
	left: 50%;
	margin-left: -$module_connect_border_width*0.5;
	border-left-color: transparent;
	border-right-color: transparent;
}

.module-connect-right:before,
.module-connect-left:after{
	top: 50%;
	margin-top: -$module_connect_border_width*0.5;
	border-top-color: transparent;
	border-bottom-color: transparent;
}

.module-connect-right:before{
	right: -($module_connect_border_width*0.5 + $module_connect_border_height);
	border-left-width: $module_connect_border_height;
	border-right-color: transparent;
}

.module-connect-left:after{
	left: -($module_connect_border_width*0.5 + $module_connect_border_height);
	border-right-width: $module_connect_border_height;
	border-left-color: transparent;
}

.module-connect-top:before{
	top: -($module_connect_border_width*0.5 + $module_connect_border_height);
	border-bottom-width: $module_connect_border_height;
	border-top-color: transparent;
}

.module-connect-bottom:after{
	bottom: -($module_connect_border_width*0.5 + $module_connect_border_height);
	border-top-width: $module_connect_border_height;
	border-bottom-color: transparent;
}